<template>
  <div class="mainHeader">
    <el-menu mode="horizontal" style="width: 100%;display: flex;justify-content: space-between;" :default-active="$route.path" router  active-text-color="#409EFF">
<!--      <el-menu-item>-->
        <el-menu-item index="/home"
        >
          <img src="../assets/netlogo.png" alt="" width="150" height="65" />
        </el-menu-item>
<!--      </el-menu-item>-->
      <el-menu-item index="/home">
        首页
      </el-menu-item>
      <el-menu-item index="/recycling">
        卡券回收
      </el-menu-item>
      <el-menu-item index="/lowPrice">
        低价卡券
      </el-menu-item>
      <el-menu-item index="/offline">
        线下回收
      </el-menu-item>
<!--      <el-menu-item>-->
        <div class="login">
          <el-button
            v-if="loginStatu === 'unlogined'"
            type="primary"
            round
            style="height: 40px; width: 100px; font-size: 16px"
            @click="toLogin"
          >登录</el-button
          >
          <div v-else="loginStatu === 'logined'">
            <el-dropdown @command="handleCommand">
              <div class="el-dropdown-link" @click="toSelf">
                <el-avatar style="cursor: pointer">{{ play }}</el-avatar>
              </div>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item v-if="play === 'admin'" command="admin">
                  管理
                </el-dropdown-item>
                <el-dropdown-item command="exit"> 注销 </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
<!--      </el-menu-item>-->
    </el-menu>
  </div>
</template>
<script>
export default {
  data() {
    return {
      loginStatu: "unlogined",
      play: "",
    };
  },
  mounted() {
    this.getID();
  },
  created() {
    window.addEventListener("setItem", () => {
      this.getID();
    });
  },
  methods: {
    toSelf() {
      if (window.sessionStorage.getItem("username") == "admin") {
        this.$message({
          type: "warning",
          message: "你是管理员哎",
          center: true,
          duration:800
        });
      } else {
        this.$router.push("/self-center");
      }
    },
    getID() {
      var id = window.sessionStorage.getItem("id");
      var name = window.sessionStorage.getItem("username");
      if (id === null) {
        this.loginStatu = "unlogined";
      } else {
        this.loginStatu = "logined";
        this.play = name;
      }
    },
    toLogin() {
      this.$router.push("/login");
    },
    toHome() {
      this.$router.push("/");
    },
    handleCommand(command) {
      if (command === "exit") {
        this.axios
          .post("/api/logout", {
            username: sessionStorage.getItem("username"),
          })
          .then((res) => {
            sessionStorage.removeItem("id");
            sessionStorage.removeItem("username");
            this.getID();
            this.$message({
              type: "success",
              message: res.data.message,
            });
            this.$router.push("/");
          })
          .catch((err) => {
            console.log(err);
          });
      }
      if (command === "admin") {
        this.$router.push("/admin/userAdmin");
      }
    },
  },
};
</script>
<style>
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.block {
  /* width: 0; */
  height: 68px;
}
.mainHeader {
  position: fixed;
  display: flex;
  justify-content: space-between;
  top: 0;
  width: 100%;
  height: 67px;
  margin-top: 1px;
  z-index: 999;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  border-radius: 0px 0px 5px 5px;
  min-width: 900px;
  background-color: #f2f6fc;
  font-size: 28px !important;
}
.icon {
  width: 18%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  z-index: 3;
}
.options {
  width: 70%;
  display: flex;
  justify-content: space-around;
}
.login {
  justify-content: center;
  align-items: center;
  display: flex;
  width: 140px;
}
  .el-menu-item{
    font-size: 18px;
  }
.el-menu--horizontal>.el-menu-item.is-active:first-child {
  border: none;
}
</style>
